<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父向子传递props</title>
</head>
<body>
<!-- 嵌套关系：app 嵌套 introduce -->
<div id="app">
    <h1>打个招呼：</h1>
    <!-- 使用子组件，同时传递title属性 -->
    <introduce title="大家好，我是虎哥"/>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    /*
    - 这个子组件中要使用“title属性”渲染页面，但是自己并没有“title属性”
    - 通过props来接收父组件属性，名为“title”。
    */

    Vue.component("introduce",{
        template:'<h3>{{title}}</h3>', // 直接使用props接收到的“title属性”来渲染页面
        props:['title']  // 通过props来接收一个父组件传递的“title属性”
    })

    var app = new Vue({
        el:"#app", // el,即element。要渲染的的页面元素
        data:{ // 数据
            //title:"大家好，我是虎哥"
        }
    })

</script>
</body>
</html>
